import React, {useState, useRef, useEffect} from 'react';
import {message, Button, Tabs, Divider,DatePicker,Popconfirm} from 'antd';
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {connect} from 'umi';
import {queryUnitManageList,deleteUnitManage,saveAndUpdatePerformanceUnitManagement} from '../../service';
import {assessPeriodList, BPMStatusEnum, distributionStatusList} from "@/utils/constant";
import UnitManageForm from '../../components/UnitManageForm';
import moment from 'moment';

const {TabPane} = Tabs;

const TableList = () => {
  const actionRef = useRef();
  const actionRef2 = useRef();
  const [record,setRecord] = useState(null);
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);

  const columns = [
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
    },
    {
      title: '绩效方案名称',
      dataIndex: 'performanceName',
      align:'center',
      hideInSearch:true
    },
    {
      title: '考核年度',
      dataIndex: 'assessmentYear',
      align:'center',
      render: (text) => {
        return text != '-' ? moment(text).format('YYYY') : '';
      },
      renderFormItem: (item, props) => {
        return <DatePicker className='widthStyle' picker="year" {...props}/>;
      }
    },
    {
      title: '考核周期',
      dataIndex: 'assessmentCycle',
      align:'center',
      render: (text) => {
        return assessPeriodList.find((item) => item.value === text)?.label;
      }
    },
    {
      title: '考核单位数量',
      align:'center',
      hideInSearch: true,
      dataIndex: 'assessmentNum',
    },
    {
      title: '申请人',
      align:'center',
      dataIndex: 'name',
    },
    {
      title: '申请人工号',
      align:'center',
      hideInSearch: true,
      dataIndex: 'code',
    },
    {
      title: '审批状态',
      dataIndex: 'approveStatus',
      hideInSearch: true,
      valueEnum: BPMStatusEnum
    },
    {
      title: '分配状态',
      dataIndex: 'status',
      hideInSearch: true,
      render: (text) => {
        return distributionStatusList.find((item) => item.value === text)?.label;
      }
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      align: 'center',
      render: (item, record) => (
        <>
          {(record.approveStatus === 0) && <>
            <a onClick={() => addOrEdit(record)}>修改</a>
            <Divider type="vertical"/>
            <Popconfirm title={`是否确认删除?`} onConfirm={() => delUnitManage(record.id)} okText="是" cancelText="否">
              <a>删除</a>
            </Popconfirm>
            <Divider type="vertical"/>
            <Popconfirm title={`是否确认发起?`} onConfirm={() => sendBpm(record.id)} okText="是" cancelText="否">
              <a>发起审批(暂无)</a>
            </Popconfirm>
          </>}
          {(record.approveStatus !== 0 && record.bpmUrl) && <><a onClick={() => window.open(record.bpmUrl)}>审批详情</a></>}
        </>
      ),
    }
  ];

  const handleChangTabIndex = (key) => {
    if (key === '1') {
      actionRef.current && actionRef.current.reload();
    } else {
      actionRef2.current && actionRef2.current.reload();
    }
  };

  const sendBpm = (id) => {
    console.log("缺少bpm",id);
  };

  const addOrEdit = (record) =>{
    if(record){
      setRecord(record);
    }
    setVisible(true);
  };

  const handleCancel = () => {
    setVisible(false);
    setRecord(null);
  };

  const delUnitManage = (id) => {
    deleteUnitManage(id).then(res => {
      if (res.flag) {
        message.success('删除成功！');
        actionRef.current.reload();
      } else {
        message.error(res.error);
      }
    });
  };

  const handleSubmit = (values) => {
    setLoading(true)
    saveAndUpdatePerformanceUnitManagement(values).then((res) => {
      if (res.flag) {
        handleCancel();
        message.success('操作成功！');
        actionRef.current.reload();
      } else {
        message.error(res.error);
      }
      setLoading(false);
    })
  };

  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="1" onChange={handleChangTabIndex}>
        <TabPane tab="待办理" key="1">
          <ProTable
            actionRef={actionRef}
            rowKey="id"
            request={(params) => queryUnitManageList(params, [0,1])}
            columns={columns}
            toolBarRender={() => [
              <Button key={0} type="primary" onClick={() => addOrEdit(null)}>新建</Button>,
            ]}
          />
          <UnitManageForm
            loading={loading}
            record={record}
            visible={visible}
            onCancel={handleCancel}
            onSubmit={handleSubmit}
          />
        </TabPane>
        <TabPane tab="已办理" key="2">
          <ProTable
            actionRef={actionRef2}
            rowKey="id"
            request={(params) => queryUnitManageList(params, [2])}
            columns={columns}
          />
        </TabPane>
      </Tabs>
    </PageHeaderWrapper>
  )
};

export default connect(({}) => ({}))(TableList)
